import React from 'react'
import { usePermission } from '../hooks/usePermission'

interface PermissionWrapperProps {
  children: React.ReactNode
  requiredRole?: 1 | 2 // 1=管理员, 2=普通用户
  fallback?: React.ReactNode
  hideIfNoPermission?: boolean
}

// 权限控制包装组件
const PermissionWrapper: React.FC<PermissionWrapperProps> = ({
  children,
  requiredRole = 2, // 默认普通用户权限
  fallback = null,
  hideIfNoPermission = true,
}) => {
  const { hasPermission, isLoggedIn } = usePermission()
  
  // 如果未登录，不显示任何内容
  if (!isLoggedIn) {
    return hideIfNoPermission ? null : <>{fallback}</>
  }
  
  // 检查权限
  const hasRequiredPermission = hasPermission(requiredRole)
  
  if (!hasRequiredPermission) {
    return hideIfNoPermission ? null : <>{fallback}</>
  }
  
  return <>{children}</>
}

// 管理员专用组件
export const AdminOnly: React.FC<{ children: React.ReactNode; fallback?: React.ReactNode }> = ({
  children,
  fallback = null,
}) => (
  <PermissionWrapper requiredRole={1} fallback={fallback}>
    {children}
  </PermissionWrapper>
)

// 普通用户专用组件
export const UserOnly: React.FC<{ children: React.ReactNode; fallback?: React.ReactNode }> = ({
  children,
  fallback = null,
}) => (
  <PermissionWrapper requiredRole={2} fallback={fallback}>
    {children}
  </PermissionWrapper>
)

// 语音对话权限组件
export const VoiceChatPermission: React.FC<{ 
  children: React.ReactNode
  fallback?: React.ReactNode
}> = ({ children, fallback = null }) => {
  const { canUseVoiceChat } = usePermission()
  
  if (!canUseVoiceChat) {
    return <>{fallback}</>
  }
  
  return <>{children}</>
}

// AI聊天权限组件
export const AIChatPermission: React.FC<{ 
  children: React.ReactNode
  fallback?: React.ReactNode
}> = ({ children, fallback = null }) => {
  const { canUseAIChat } = usePermission()
  
  if (!canUseAIChat) {
    return <>{fallback}</>
  }
  
  return <>{children}</>
}

// 语言切换权限组件
export const LanguageSwitchPermission: React.FC<{ 
  children: React.ReactNode
  fallback?: React.ReactNode
}> = ({ children, fallback = null }) => {
  const { canSwitchLanguage } = usePermission()
  
  if (!canSwitchLanguage) {
    return <>{fallback}</>
  }
  
  return <>{children}</>
}

// 换肤权限组件
export const SkinChangePermission: React.FC<{ 
  children: React.ReactNode
  fallback?: React.ReactNode
}> = ({ children, fallback = null }) => {
  const { canChangeSkin } = usePermission()
  
  if (!canChangeSkin) {
    return <>{fallback}</>
  }
  
  return <>{children}</>
}

export default PermissionWrapper
